<template>
  <el-popover placement="bottom" trigger="hover" width="480">
    <div class="popover-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(list, name, index) in dataList"
          :key="index"
          :label="name"
          :name="name"
          class="content-box">
          <el-descriptions v-if="activeName == '热门城市'" :colon=false :column="4">
            <el-descriptions-item v-for="city in dataList[activeName]" :key="city.dataId" ><el-button type="text" @click="clickItem(city)">{{city.cityName}}</el-button></el-descriptions-item>
          </el-descriptions>
          <el-descriptions v-else v-for="key in Object.keys(dataList[activeName])" :key="key" :title="key" :colon=false :column="5">
            <el-descriptions-item v-for="city in dataList[activeName][key]" :key="city.dataId"><el-button type="text" @click="clickItem(city)">{{city.cityName}}</el-button></el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-input
      :value="displayValue"
      slot="reference"
      :readonly="true"
      :placeholder="placeholder"
    ></el-input>
  </el-popover>
</template>

<script>
import { getCities } from "@/api/common";
export default {
  name: "position-box",
  props: {
    from: {
      type: String,
      required: true,
    },
    placeholder: {
      type: String
    }
  },
  data() {
    return {
      displayValue: '',
      activeName: "热门城市",
      current: {},
      loading: false,
      dataList: {
        热门城市: [],
        ABCD: {
          A: [],
          B: [],
          C: [],
          D: []
        },
        EFGHJ: {
          E: [],
          F: [],
          G: [],
          H: [],
          J: []
        },
        KLMNOP: {
          K: [],
          L: [],
          M: [],
          N: [],
          O: [],
          P: []
        },
        QRSTW: {
          Q: [],
          R: [],
          S: [],
          T: [],
          W: []
        },
        XYZ: {
          X: [],
          Y: [],
          Z: []
        },
      },
    };
  },
  mounted() {
    this.handleClick({
      label: '热门城市'
    })
  },
  methods: {
    handleClick(tab) {

      this.loading = true
      const label = tab.label;

      let len = Object.keys(this.dataList[label]).length

      if (label == '热门城市') {
        getCities({
          "isHot": '1'
        }).then(res => {
          this.dataList[label] = []
          res.data.forEach(item => {
            this.dataList[label].push({
              dataId: item.cityCode,
              cityName: item.cityName,
              label: item.label
            })
          })
          this.loading = false
        })
      } else {
        for (let i = 0; i < len; i++) {
          let wordTitle = Object.keys(this.dataList[label])[i]
          getCities({
            "isHot": '0',
            "titleWorld": wordTitle,
          }).then(res => {
            this.dataList[label][wordTitle] = []
            res.data.forEach(item => {
              this.dataList[label][wordTitle].push({
                dataId: item.cityCode,
                cityName: item.cityName,
                label: item.label
              })
            })
            this.loading = false
          })
        }
      }

    },
    clickItem(obj) {
      this.current = obj;
      this.displayValue = obj.cityName + ' ' + obj.label
      this.$emit("update:from", obj.dataId);
      this.$emit("update:label", obj.label);
    },
  },
};
</script>

<style lang="scss" scoped>
.popover-box {
  .content-box {
    min-height: 150px;
    max-height: 300px;
    overflow: auto;
  }
}
.one {
  display: inline-block;
  width: 70px;
  margin: 10px 10px;
  cursor: pointer;
  &:hover {
    color: #409eff;
  }
  &.active {
    color: #409eff;
  }
}
.list-box {
  margin-bottom: 15px;
  p {
    color: red;
    margin-right: 10px;
    margin-top: 10px;
  }
}
</style>
